<template>
  <div>
    <div class="box" :class="{ isAnimate: isAnimate }"></div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import BezierEasing from 'bezier-easing'
export default {
  data() {
    return {
      list: [],
      isAnimate: false
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.isAnimate = true

      var easing = BezierEasing(0, 0, 1, 0.5)
      // easing allows to project x in [0.0,1.0] range onto the bezier-curve defined by the 4 points (see schema below).
      console.log(easing(0.0)) // 0.0
      console.log(easing(0.5)) // 0.3125
      console.log(easing(1.0)) // 1.0
    }
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  transition: all 0.5s ease-in;
  &.isAnimate {
    transform: rotate(30deg);
  }
}
</style>
